<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>咕魂</title>
  </head>
  <body>
    <div class="backcolor3"></div>
    <div class="backcolor2"></div>
    <div class="backcolor"></div>
    <div class="main">
      <div class="box">
        <div class="lbtop">
          要输入正确的访问方式哦！
        </div>
        <div
          class="lbtip"
        >
          输入你想要访问的模块:
        </div>
        <div style="vertical-align: auto;position: relative;">
          <input id="model" type="text" />
          <div id="tip-list"></div>
          <button onclick="handleFind()">✔</button>
        </div>
        <div style="margin: 5%; font-size: 1.2rem">
          <a href="https://qm.qq.com/cgi-bin/qm/qr?k=ymIo9_iSdrrF_eRTqEPfDDUliyfIR87f&noverify=0">
            联系方式：QQ1215491002
          </a>
        </div>
        <div class="lbbox" id="lbt">
          <div class="bt inaccessible" title="1111">
            <div class="btl" onclick="handleVisit('111')">次元恋</div>
            <div class="btr" onclick="alert('暂时无法删除')">×</div>
          </div>
          <div class="bt"><div style="width: 20px;">+</div></div>
        </div>
      </div>
    </div>
  </body>
</html>
<style>
  .lbbox{
    text-align: center;
    font-size: 16px;
    margin: 0 16%;
  }
  .lbbox .bt{
    background-color: #FFF6;
    display: flex;
    border-radius: 20px;
    float: left;
    margin: 5px;
    padding: 5px;
  }
  .lbbox .inaccessible{
    background-color: #0004;
  }
  .lbbox .bt:hover{
    cursor:pointer
  }
  .lbbox .bt .btl{
    flex: 1;
    margin-left: 10px;
    margin-right: 4px;
  }
  .lbbox .bt .btr{
    width: 20px;
    margin: 0 6px;
    border-radius: 50%;
    background-color: #FFF6;
  }
  html,
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    background: linear-gradient(to bottom right, #94d5e6, #f3c1ff);
  }

  .lbtop{
    font-size: 1.2rem; 
    line-height: 2rem
  }
  .lbtip{
    text-align: left;
    margin: 5%;
    font-size: 1.25rem;
    line-height: 2rem;
  }
  @media screen and (orientation: portrait) {
    /*竖屏 css*/
    html {
      font-size: 4vw;
    }
  }
  @media screen and (orientation: landscape) {
    /*横屏 css*/
    html {
      font-size: 2.5vh;
    }
  }
  .backcolor,
  .backcolor2,
  .backcolor3,
  .main {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
  }
  .backcolor {
    display: flex;
    animation: turnColor 10s infinite;
    background: linear-gradient(to top right, #cde0a8, #e2aff6);
  }
  .backcolor2 {
    animation: turnColor2 10s infinite;
    background: linear-gradient(to bottom right, #f0b6da, #d5f3b2);
  }
  .backcolor3 {
    animation: turnColor3 10s infinite;
    background: linear-gradient(to top right, #d0b0e7, #a9e5eb);
  }
  @keyframes turnColor {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes turnColor2 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes turnColor3 {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .main {
    display: flex;
  }
  .box {
    text-align: center;
    flex: 1;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 15rem;
  }
  input {
    width: 65%;
    padding: 0.3rem 0.8rem;
    outline: none;
    border-radius: 1.3rem;
    background-color: white;
  }
  input:focus {
    outline: 2px solid lightblue;
  }
  button {
    width: 2rem;
    height: 2rem;
    margin: 0.2rem;
    border-radius: 40%;
    background-color: #fff1;
    padding: 0;
  }
  button:hover {
    background-color: #fff4;
  }
  button,
  input {
    font-size: 1.2rem;
  }
  #tip-list{
    width: 65%;
    position: absolute;
    left: 0;
    right: 2.5rem;
    margin: auto;
    background: #0002;
  }
  #tip-list li{
    height: 1rem;
    background: #fffa;
    font-size: .8rem;
    line-height: 1rem;
    vertical-align: middle;
    margin: 2px;
    text-align: left;
    list-style: none;
    padding: 0 0.5rem;
    cursor: pointer;
  }
</style>
<script>
  let urls = null
  let master = false
  let inaccessibleList = []
  // 注册文本框监听事件
  function searchInputHandler(){
    const searchInput = document.getElementById("model");
    const tipList = document.getElementById("tip-list");
    // 列表被点击时
    const tipClickHandle = function(){
      searchInput.value = this.textContent;
      tipList.style.display = "none";
    }
    // 输入框文本发生变化时
    searchInput.addEventListener('input', () => {
      const searchTerm = searchInput.value.toLowerCase();
      let resMsg = [];
      if(searchTerm !==""){
        // 清除dom
        while (tipList.firstChild) {
          tipList.removeChild(tipList.firstChild);
        }
        urls.forEach(item => {
          if (item.name.toLowerCase().includes(searchTerm)) {
            const li = document.createElement('li');
            li.textContent = item.name;
            li.addEventListener("click",tipClickHandle)
            tipList.appendChild(li);
            resMsg.push(item.name);
          }
        });
      }
      if(resMsg.length===0){
        tipList.style.display = "none";
      }else{
        tipList.style.display = "";
      }
    })
    // 监听回车
    searchInput.addEventListener('keydown', function (event) {
      if (event.key === 'Enter') {
        handleFind();
      }
    });
  }
  // 读取json文件
  function readUrl(){
    var url = "url.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
    var request = new XMLHttpRequest();
    request.open("get", url);/*设置请求方法与路径*/
    request.send(null);/*不发送数据到服务器*/
    request.onload = function () {/*XHR对象获取到返回信息后执行*/
      if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
        urls = JSON.parse(request.responseText);
        pushChild()
      }
    }
  }
  // 插入节点
  function pushChild(){
    if(urls){
      // 清除原先的节点
      let box = document.getElementById("lbt")
      while (box.firstChild) {
        box.removeChild(box.firstChild)
      }
      inaccessibleList = []
      // 进行一下排序，白色按钮在灰色按钮前
      let doms = []
      for(let item of urls){
        if(item.inaccessible)continue
        doms.push(item)
      }
      for(let item of urls){
        if(!item.inaccessible)continue
        doms.push(item)
      }
      for(let item of doms){
        let bt = document.createElement("div")
        let btl = document.createElement("div")
        let btr = document.createElement("div")
        bt.classList.add('bt')
        btl.classList.add('btl')
        btr.classList.add('btr')
        bt.title = item.detail
        btr.addEventListener("click",(even)=>{
          even.stopPropagation();
          alert('暂时无法删除')
        },false)
        btl.innerText = item.name
        btr.innerText = '×'
        if(item.inaccessible){
          bt.classList.add('inaccessible')
          inaccessibleList.push(bt)
          bt.addEventListener("click",(even)=>{
            even.stopPropagation();
            if(!master)return
            handleVisit(item.url)
          },false)
        }else{
          bt.addEventListener("click",(even)=>{
            even.stopPropagation();
            handleVisit(item.url)
          },false) 
        }
        bt.appendChild(btl)
        bt.appendChild(btr)
        box.appendChild(bt)
      }
      let bt = document.createElement("div")
      bt.classList.add('bt')
      let ad = document.createElement("div")
      ad.innerText = "+"
      ad.style = "width: 20px;"
      ad.addEventListener("click",(even)=>{
          even.stopPropagation();
          alert('暂时无法添加')
        },false)
      bt.appendChild(ad)
      box.appendChild(bt)
    }
  }
  // 提交搜索
  function handleFind() {
    let key = document.getElementById("model").value;
    // 解锁指令
    if (key === "master-unlock") {
      master = true
      for(let item of inaccessibleList){
        item.classList.remove("inaccessible")
      }
      return;
    }
    // 查找相应内容
    const matchingUrls = urls.filter(item => item.name === key).map(item => item.url);
    if(matchingUrls.length>0){
      handleVisit(matchingUrls[0])
      return;
    }
    // 无法匹配
    alert("未找到相关内容");
  }
  function handleVisit(url){
    window.location.href = url
  }
  readUrl();
  searchInputHandler();
</script>
